<div class="box box-maxbid">
    <div class="box-header">
        <h3 class="box-title">Lotes Cadastro</h3>
    </div><!-- /.box-header -->
    <!-- form start -->

    <div class="overlay" ng-show="hideform"></div>
    <div class="loading-img" ng-show="hideform"></div>

    <form role="form" name="LoteForm" >
        <div class="box-body">
            <div class="form-group row">

                <div class="col-md-8 col-xs-12">
                    <div class="row form-group">
                        <div class="col-xs-2">
                            <label for="exampleInputEmail1">Lote</label>
                            <input type="text" class="form-control disabled" id="InputNUM_LOTE" 

                                   name="NUM_LOTE"
                                   ng-model="lote.NUM_LOTE"
                                   disabled="true" 
                                   /> 



                        </div>
                        <div class="col-xs-2">
                            <label for="exampleInputEmail1">Hora</label>
                            <input type="text" 
                                   class="form-control" 
                                   id="InputHora" 
                                   name="FECHAMENTO"
                                   ng-model="lote.FECHAMENTO"
                                   required
                                   ui-mask="99:99"
                                   maxlength="5"

                                   >
                            <div class="messages-alert" ng-show="LoteForm.FECHAMENTO.$dirty && LoteForm.FECHAMENTO.$invalid">
                                <span ng-show="LoteForm.FECHAMENTO.$error.required">* Campo &eacute; obrigat&oacute;rio</span>

                            </div>
                        </div>

                        <div class="col-md-2 col-xs-3">
                            <label for="exampleInputVMV">VMV</label>
                            <input type="text" 
                                   class="form-control" 
                                   id="InputVALOR_MINIMO" 
                                   name="VALOR_MINIMO"
                                   data-mask
                                   ng-model="lote.VALOR_MINIMO"
                                   required
                                   maxlength="17"

                                   />
                            <div class="messages-alert" ng-show="LoteForm.VALOR_MINIMO.$dirty && LoteForm.VALOR_MINIMO.$invalid">
                                <span ng-show="LoteForm.VALOR_MINIMO.$error.required">* Campo &eacute; obrigat&oacute;rio</span>

                            </div>
                        </div>

                        <div class="col-xs-2">
                            <label for="exampleInputVMV">Lance Inicial</label>
                            <input type="text" 
                                   class="form-control" 
                                   id="InputLANCE_INICIAL" 
                                   name="LANCE_INICIAL"
                                   data-mask
                                   ng-model="lote.LANCE_INICIAL"
                                   required
                                   maxlength="15"

                                   />
                            <div class="messages-alert" ng-show="LoteForm.LANCE_INICIAL.$dirty && LoteForm.LANCE_INICIAL.$invalid">
                                <span ng-show="LoteForm.LANCE_INICIAL.$error.required">* Campo &eacute; obrigat&oacute;rio</span>

                            </div>
                        </div>

                        <div class="col-xs-2">
                            <label for="exampleInputVMV">Incremento</label>
                            <input type="text" 
                                   class="form-control" 
                                   id="InputINCREMENTO" 
                                   name="INCREMENTO"
                                   data-mask
                                   ng-model="lote.INCREMENTO"
                                   required
                                   maxlength="15"

                                   />
                            <div class="messages-alert" ng-show="LoteForm.INCREMENTO.$dirty && LoteForm.INCREMENTO.$invalid">
                                <span ng-show="LoteForm.INCREMENTO.$error.required">* Campo &eacute; obrigat&oacute;rio</span>

                            </div>
                        </div>

                        <div class="col-xs-2">
                            <label for="exampleInputVMV">Comiss&atilde;o</label>
                            <input type="text" 
                                   class="form-control" 
                                   id="InputCOMISSAO" 
                                   name="COMISSAO"
                                   ng-model="lote.COMISSAO"
                                   required
                                   maxlength="2"
                                   ng-pattern="/^[0-9]{1,2}$/"

                                   />
                            <div class="messages-alert" ng-show="LoteForm.COMISSAO.$dirty && LoteForm.COMISSAO.$invalid">
                                <span ng-show="LoteForm.COMISSAO.$error.required">* Campo &eacute; obrigat&oacute;rio</span>
                                <span ng-show="LoteForm.COMISSAO.$error.pattern">* Apenas n&uacute;meros</span> 
                            </div>
                        </div>
                    </div> <!-- ROW -->

                    <div class="row form-group">
                        <div class="col-xs-12">
                            <label for="exampleInputEmail1">Descri&ccedil;&atilde;o do Lote</label>
                            <input type="text" 
                                   name="INFO"
                                   ng-model="lote.DESCRICAO"
                                   required class="form-control" id="exampleInputEmail1" placeholder="dados para titulo">
                        </div>
                    </div>

                    <div class="form-group row">

                        <div class="col-xs-12">
                            <label>Descri&ccedil;&atilde;o detalhada</label>
                            <textarea class="form-control itextarea" name="DESCRICAO_DETALHADA" rows="10" 
                                      id="itextarea" coc-editor
                                      ng-model="lote.DESCRICAO_DETALHADA"></textarea>

                        </div>

                    </div>
                    <div class="row form-group">   
                        <div class="col-xs-12 ">
                            <label> TAGS <small class="text-red">as tags ajudar&atilde;o os usu&aacute;rios quando fizerem pesquisas no site. Separe as palavras por ,</small></label>
                            <input type="text" class="form-control" ng-model="lote.TAGS" name="TAGS" />
                        </div>
                    </div>

                    <div class="row form-group">   
                        <div class="col-xs-12 ">
                            <label> LINK DE VIDEO </label>
                            <input type="text" class="form-control" ng-model="lote.LINK" name="LINK" />
                        </div>
                    </div>

                    <div class="row form-group">
                        <div class="col-xs-4 col-md-2">
                            <label for="InputTipo">Retirado</label> <select ng-disabled="encerrado"
                                                                            class="form-control" ng-model="lote.RETIRADO"
                                                                            ng-selected="lote.RETIRADO" name="RETIRADO">

                                <option ng-repeat="type in optionsRetirado" value="{{type.id}}">{{type.label}}</option>

                            </select>
                            <div class="messages-alert"
                                 ng-show="LoteForm.RETIRADO.$dirty && LoteForm.RETIRADO.$invalid">
                                <span ng-show="LoteForm.RETIRADO.$error.required">*Selecione uma
                                    op&ccedil;&atilde;o</span>
                            </div>
                        </div>

                        <div class="col-xs-8 col-md-10">
                            <label>RETIRADA</label>
                            <input name="INFO_RETIRADA" class="form-control" maxlength="90" ng-model="lote.INFO_RETIRADA" />
                        </div>
                    </div>

                    <div class="row form-group">
                        <div class="col-xs-12 col-md-12">
                            <label>VISITAÇÃO</label>
                            <input name="INFO_VISITACAO" class="form-control" maxlength="90" ng-model="lote.INFO_VISITACAO" />
                        </div>


                    </div>

                    <div class="row form-group">
                        <div class="col-xs-12 col-md-12">
                            <label>INFORMAÇÕES EXTRAS</label>
                            <input name="INFO" class="form-control" maxlength="100" ng-model="lote.INFO" />
                        </div>
                    </div>

                </div><!-- BOX LEFT -->
                <!-- BOX RIGHT -->
                <div class="col-xs-4">
                    <div class="row form-group">
                        <div class="col-xs-12">
                            <label for="exampleInputEmail1">Categorias</label>
                            <select  class="form-control"
                                     required 
                                     ng-model="lote.CATEGORIE_ID"
                                     ng-options="cat.COD as cat.NAME for cat in categories"
                                     ng-change="getSubcategories()"
                                     > 
                                <option value="">Selecionar</option>

                            </select> 
                        </div>
                    </div>
                    <div class="row form-group" >
                        <div class="col-xs-12">
                            <label for="exampleInputEmail1">Tipo Ativo</label>
                            <div ng-hide="subcategories.length">Aguardando sele&ccedil;&atilde;o da categoria</div>
                            <select  required name="TIPO_ID" ng-model="lote.TIPO_ID" ng-show="subcategories.length" 
                                     ng-options="tp.ID as tp.NAME for tp in subcategories"
                                     class="form-control"> 
                                <option value=""> Selecionar</option>

                            </select> 

                        </div>

                    </div>

                    <div class="row form-group">
                        <div class="col-xs-12">
                            <label for="exampleInputEmail1">Localiza&ccedil;&atilde;o</label>
                            <select name="estados" class="form-control"
                                    required 
                                    ng-model="lote.ESTADO"
                                    ng-options="uf.ID as uf.NOME for uf in estados"
                                    ng-change="getCidades()"
                                    > 
                                <option value="">Selecionar</option>

                            </select> 

                        </div>



                    </div>
                    <div class="row form-group">
                        <div class="col-xs-12">
                            <label for="exampleInputEmail1">Cidade</label>
                            <div  ng-hide="cidades.length">Aguardando sele&ccedil;&atilde;o do estado ..</div>
                            <select required name="cidade" ng-model="lote.CIDADE" 
                                    ng-show="cidades.length" class="form-control"
                                    ng-options="tp.ID as tp.NOME for tp in cidades"

                                    > 
                                <option value=""> Selecionar</option>

                            </select> 

                        </div>
                    </div>   

                    <!--BOX IMAGES -->

                    <div class="form-group row">
                        <div class="col-xs-12">
                            <h4 style="margin-top: 0px;margin-bottom: 5px;">Imagens</h4>
                            <hr style="margin-top: 0px;"/>

                        </div>
                        <div class="box-lote-images" ng-show="files.length">  
                            <div class="col-xs-6" ng-repeat="image in files">
                                <!-- small box -->
                                <div class="small-box bg-gray image-lote">
                                    <div class="inner box-inner-image-lote">
                                        <img  class="" ng-src="<?php echo web_dir(); ?>images/lotes/thumbs/{{image.name}}"  width="100%"/>
                                        <a href="javascript:void(0)" title="remover imagem" class="btn delete-image-lote btn-danger btn-sm"
                                           ng-click="onDeleteImageLote(image, $index)"><i class="fa fa-trash-o"></i></a>

                                    </div>


                                </div>
                            </div>
                        </div>

                    </div>
                    <!-- BOX IMAGES END-->

                </div>
                <!--  BOX  RIGHT END -->

            </div> 







        </div><!-- /.box-body -->

        <div class="box-footer">
            <button type="submit" ng-click="save()" ng-disabled="LoteForm.$invalid" class="btn btn-primary">Salvar</button>
            <button type="submit" ng-click="save('true')"  ng-disabled="LoteForm.$invalid" class="btn btn-primary">Salvar e Listar</button>
            <a href="#/leilao/{{lote.LEILAO_ID}}/lotes" class="btn btn-danger">Cancelar</a>
            <span class="separator"></span>
            <a href="javascript:void(0)" ng-click="triggerButton()" ng-disabled="LoteForm.$invalid"  class="btn btn-info"><i class="fa fa-picture-o"></i> Upload Imagem</a>
            <div class="row">
                <div ng-show="startProgressBar" class="col-xs-12" style="margin-top:20px; position: absolute;">
                    <div class="progress xs lote-progress-bar">
                        <div class="progress-bar progress-bar-light-blue" style="width:{{progress}}%;"></div>
                    </div>
                </div>
                <upload-button  action="/api/uploadImageLote" complete="finishUploadLote($data, $status)"></upload-button>
            </div>
        </div>
    </form>
</div><!-- /.box -->

